<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <h1>计算属性：用来做计算的一个属性</h1>
    <p>计算属性的特点：1.作为属性调用，不带括号，类似data中的一个属性；2.依赖缓存，性能较好；3.解耦，在模板中写简单的逻辑，复杂的过程放在js中。不要将js和模板混在一起。</p>
    <div>
      <table border="1">
        <thead>
          <tr>
            <th colspan="3">购物车</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>商品名称</td>
            <td>商品数量</td>
            <td>商品价格</td>
          </tr>
          <tr v-for="(phone,index) in goodsList">
            <td>{{phone.name}}</td>
            <td><input type="text" v-model.number="phone.num"></td>
            <!-- <td>{{phone.num}}</td> -->
            <td>{{phone.price}}</td>
          </tr>
          <tr>
            <td>小结</td>
            <td>{{getTotalNum}}件</td>
            <td>{{getTotalPrice}}元</td>
          </tr>
          <!-- <tr>
            <td>小结</td>
            <td>{{getTotalNum}}件</td>
            <td>{{getTotalPrice}}元</td>
          </tr>
          <tr>
            <td>小结</td>
            <td>{{getTotalNum}}件</td>
            <td>{{getTotalPrice}}元</td>
          </tr>
          <tr>
            <td>小结</td>
            <td>{{totalNum()}}件</td>
            <td>{{totalPrice()}}元</td>
          </tr>
          <tr>
            <td>小结</td>
            <td>{{totalNum()}}件</td>
            <td>{{totalPrice()}}元</td>
          </tr>
          <tr>
            <td>小结</td>
            <td>{{totalNum()}}件</td>
            <td>{{totalPrice()}}元</td>
          </tr> -->
        </tbody>
      </table>
    </div>
  </div>
  <script src="./vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        // 购物车的数据
        goodsList: [
          { name: 'iphone 12', price: 5999, num: 10 },
          { name: 'mi 11', price: 3999, num: 15 },
          { name: 'huawei P40', price: 4999, num: 50 },
          { name: '1+ 7t', price: 4599, num: 8 },
        ]
      },
      // 计算属性:多对一，多个因素共同影响一个数据
      computed: {
        getTotalNum() {
          console.log('computed');
          let num = 0;
          this.goodsList.forEach(item => {
            num += item.num
          });
          return num;
        },
        getTotalPrice: {
          get: function(){
            console.log('我调用了getTotalPrice的get');
            let num = 0;
            this.goodsList.forEach(item => {
              num += item.num * item.price
            });
            return num;
          },
          set:function() {
            // 直接设置getTotalPrice的值时，才会调用
            console.log('我调用了getTotalPrice的set');
          }
        }
      },
      methods: {
        // 计算总数量
        totalNum() {
          console.log('methods');
          let num = 0;
          // 累加各个商品的数量
          this.goodsList.forEach(item => {
            num += Number(item.num)
          });
          return num
        },
        // 计算总价格
        totalPrice() {
          let num = 0;
          // 累加各个商品的数量*商品的价格
          this.goodsList.forEach(item => {
            num += item.num * item.price
          });
          return num
        }
      },
    })
  </script>
</body>

</html>